<!--
 * @Author: daidai
 * @Date: 2022-03-01 14:13:04
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-27 15:04:49
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-top.vue
-->
<template>
 <div style="width: 100%;height: 100%;position: relative;padding-top: 40px">
   <div style="position: absolute;top:20px; right: 110px;font-family: 'font1';font-size: 23px;">
     {{title}}
   </div>
   <Echart
       id="rightTop"
       :options="option"
       class="right_top_inner"
       v-if="pageflag"
       ref="charts"
       height="320px"
       width="440px"
   />
 </div>
</template>

<script>
import { currentGET } from "api/modules";
import {graphic} from "echarts"
export default {
  props:['data','title'],
  data() {
    return {
      option: {},
      pageflag: false,
      timer: null,
    };
  },
  created() {

  },

  mounted() {
    this.getData();
  },
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    getData() {
      this.pageflag = true;
      // this.pageflag =false
      currentGET("big4").then((res) => {
        if (!this.timer) {
          console.log("报警次数", res);
        }
        if (res.success) {
          this.countUserNumData = res.data;
          this.$nextTick(() => {
            this.init(res.data.dateList, res.data.numList, res.data.numList2),
                this.switper();
          });
        } else {
          this.pageflag = false;
          this.$Message({
            text: res.msg,
            type: "warning",
          });
        }
      });
    },
    //轮询
    switper() {
      if (this.timer) {
        return;
      }
      let looper = (a) => {
        this.getData();
      };
      this.timer = setInterval(
          looper,
          this.$store.state.setting.echartsAutoTime
      );
      let myChart = this.$refs.charts.chart;
      myChart.on("mouseover", (params) => {
        this.clearData();
      });
      myChart.on("mouseout", (params) => {
        this.timer = setInterval(
            looper,
            this.$store.state.setting.echartsAutoTime
        );
      });
    },
    init(xData, yData, yData2) {
      var that = this;
      this.option = {
        xAxis: {
          type: 'category',
          data:this.$props.data.xAix,
          axisLabel : {//坐标轴刻度标签的相关设置。
            interval : 0, //0：表示全部显示，1：表示隔一个显示一个，2：隔两个显示一个，3：三个显示一个，4：四个显示一个，5：五个显示一个，6：六个显示一个，7：七个显示一个，8：八个显示一个，9：九个显示一个，默认是5。
            formatter : function(params){
              var newParamsName = "";// 最终拼接成的字符串
              var paramsNameNumber = params.length;// 实际标签的个数
              var provideNumber = 4;// 每行能显示的字的个数
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
              /**
               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
               */
              // 条件等同于rowNumber>1
              if (paramsNameNumber > provideNumber) {
                /** 循环每一行,p表示行 */
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = "";// 表示每一次截取的字符串
                  var start = p * provideNumber;// 开始截取的位置
                  var end = start + provideNumber;// 结束截取的位置
                  // 此处特殊处理最后一行的索引值
                  if (p == rowNumber - 1) {
                    // 最后一次不换行
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    // 每一次拼接字符串并换行
                    tempStr = params.substring(start, end) + "\n";
                  }
                  newParamsName += tempStr;// 最终拼成的字符串
                }

              } else {
                // 将旧标签的值赋给新标签
                newParamsName = params;
              }
              //将最终的字符串返回
              return newParamsName
            }
          }
        },
        yAxis: {
          type: 'value'
        },

        tooltip: {
          trigger: 'axis', // 坐标轴触发
          formatter: function (params) {
            // 自定义显示内容
            var result = params[0].name + '<br/>'; // 显示类目名称
            console.log(result,params,"result")
            params.forEach(function (item) {
              console.log(item,"item.seriesName")
              result += '完成值' + ': ' + item.value + '<br/>' + '完成率' + ': ' + that.$props.data.xXix[item.dataIndex] + '<br/>'; // 显示系列名称和值
            });
            return result;
          },
        },
        series: [
          {
            color: {
              type: 'linear',
              // x=0,y=1,柱子的颜色在垂直方向渐变
              x: 0,
              y: 1,
              colorStops: [
                // 0%处的颜色
                {
                  offset: 0,
                  color: '#02325c',
                },
                // 50%处的颜色
                {
                  offset: 0.5,
                  color: '#0076b2',
                },
                // 100%处的颜色
                {
                  offset: 1,
                  color: '#04b4e5',
                },
              ],
              global: false, // 缺省为 false
            },
            stack:"a",
            axisLabel: {
              interval: 0  //设置间隔为0
            },
            data: this.$props.data.yAix,
            barWidth: '30%',
            itemStyle:{
              borderRadius:[100,100,0,0],
            },
            label:{
              show:true,
              formatter: function(params){
                console.log(params,"params")
                // this.$props.data.xXix[params.dataIndex]
                return that.$props.data.xXix[params.dataIndex]
              },
              position:'top',
              color:'#fff',
            },
            backgroundStyle :{

              borderRadius :5
            },
            type: 'bar',
            markPoint: {
              symbol: 'rect',
              symbolSize: [0, 0],
              data: this.$props.data.yYAix,
              label: {
                show: true,
                position: 'top',
                color: '#ffffff',
                fontSize: 12,
                fontWeight: 'bold',
                offset: [0, 0]
              },
              itemStyle: {
                color: 'transparent'
              }
            }
          },

        ]

      };
    },
  },
};
</script>
<style lang='scss' scoped>
.right_top_inner {
  margin-top: -8px;
}
</style>